<!-- 系统维护-系统设置 -->
<div class="layuimini-container">
	
	<div class="layuimini-main" style="padding:4px;">
		
		<!-- 条件搜索 -->
		<form class="layui-form layui-form-pane">
			<div class="layui-input-inline">
				<select name="medicalType" lay-filter="testType">
					<option value="">-- 请选择项目 --</option>
					<option value="1">血糖</option>
					<option value="2">血脂</option>
					<option value="3">身体质量指数</option>
				</select>
			</div>
			<div class="layui-inline" style="margin-left:15px;">
				<!-- 搜索按钮 -->
				<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn"><i class="fa fa-search"></i> 查询 </button>
			</div>
		</form>
	</div>
	
	<div class="layuimini-main" style="padding:0 4px;">
		<!-- 数据表格 -->
		<table class="layui-hide" id="systemSettingId" lay-filter="systemSettingIdFilter"></table>
	</div>
	
	<!-- 定义表格头部按钮组 -->
	<script type="text/html" id="systemSettingToolbar">
		<div class="layui-btn-container">
			<button class="layui-btn" lay-event="add"><i class="fa fa-pencil"></i> 新增检测项 </button>
		</div>
	</script>
			
	<!-- 定义表格按钮：修改 -->
	<script type="text/html" id="systemSetting">
		<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
		</div>
	</script>
</div>

<style>
.layui-table-cell {
    font-size:14px;
    padding:0 5px;
    height:auto;
    overflow:visible;
    text-overflow:inherit;
    white-space:normal;
    word-break: break-all;
}
</style>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	// var layerIndex;
    // var layerInitWidth;
    // var layerInitHeight;
	
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			element = layui.element,
			miniPage = layui.miniPage,
			layer = layui.layer;
			
			
		//初始化字典数据
		//初1：单位数据
		var medicalUnitsData = [{"value":1,"data":'mmol/L'},{"value":2,"data":'umol/L'},{"value":3,"data":'%'}];
		//初2：检验方法数据
		var medicalMethodData =[{"value":1,"data":'电化学'},{"value":2,"data":'光化学'},{"value":3,"data":'亲和色谱法'}];

		//渲染form表示，否则select显示有问题
		//注意：使用<form>表单标签的要进行渲染
		form.render();

		//对table进行初始化渲染
		table.render({
			elem: '#systemSettingId',
			url:'http://localhost:8006/sccMedicalReport',
			// url: 'api/systemSetting.json',
			toolbar: '#systemSettingToolbar',
			defaultToolbar: [],
			cols: [
				[ //字段，表头
					{field: 'repotId', title: 'ID', align:'center', width: '5%'},
					{field: 'medicalCode',title: '项目代号',  align:'center', width: '10%'},
					{field: 'medicalName',title: '项目名称', align:'center', width: '10%'},
					{field: 'medicalUnits',title: '单位', sort: true, align:'center'},
					{field: 'medicalReferemce',title: '参考值', align:'center'}, 
					{field: 'medicalMethod',title: '检验方法', align:'center', sort: true},
					{field: 'reference',title: '区间',align:'center'},
					{field: 'medicalSuggest',title: '结果解读'},
					{title: '操作',
						toolbar: '#systemSetting',
						align: "center"
					}
				]
			],
			page: true, //是否显示分页插件
			limits: [10, 20, 30], //定义每页显示多少条记录
			limit: 10, //默认每页 显示15条
			skin: 'line'
		});
		//监听搜索按钮事件
		form.on('submit(searchBtn)', function(data) {	//data是指form表单中的所有数据
			var result=JSON.stringify(data.field);
			console.log(result);
			//执行搜索事件后，table重载数据
			table.reload('systemSettingId', {
				page: {
					curr: 1,
				},//当前行是第一行
				where: {
					searchParams: result,	//搜索条件
				}
			}, 'data');
			return false;
		});
		
		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(systemSettingIdFilter)', function(obj) {	
			if (obj.event === 'add') {
				var content = miniPage.getHrefContent('page/table/add-system-setting.html'); //加载页面
				var openWH = miniPage.getOpenWidthHeight();
		
				//定义弹出层
				var index = layer.open({
					title: '新增检测项信息',
					type: 1,
					shade: 0.2,
					maxmin: false, //弹出层，最小化和最大化的按钮
					shadeClose: true, //关闭
					area: ['60%', '85%'],	//弹出窗尺寸，设置最小尺寸
					offset: ['15%', '25%'],	//弹出窗x,y位置
					content: content, //弹出层的内容
					success: function(layero, index){	// 成功弹出后回调

						//单位下拉列表数据绑定
						let medicalUnitsHtml ='';
						medicalUnitsData.forEach(function(_item){
							medicalUnitsHtml += '<option value="'+ _item.value +'">' + _item.data + '</option>';
						});
						$(layero).find("select[name='medicalUnits']").html(medicalUnitsHtml);//绑定拼接html
						
						let medicalTypeHtml='';
						medicalUnitsData.forEach(function(_item){
							medicalTypeHtml += '<option value="'+ _item.value +'">' + _item.data + '</option>';
						});
						$(layero).find("select[name='medicalType']").html(medicalTypeHtml);
						
						let medicalAssistTypeHtml='';
						medicalMethodData.forEach(function(_item){
							medicalAssistTypeHtml += '<option value="'+ _item.value +'">' + _item.data + '</option>';
						});
						$(layero).find("select[name='medicalAssistType']").html(medicalAssistTypeHtml);
						
						//检验方法下拉列表数据绑定
						let medicalMethodHtml = '';
						medicalMethodData.forEach(function(_item){
							medicalMethodHtml += '<option value="'+ _item.value +'">' + _item.data + '</option>';
						});
						$(layero).find("select[name='medicalMethod']").html(medicalMethodHtml);//绑定拼接html
						
						form.render(); //更新全部
					}
				});
			}
			return false;
		});


	
		//监 听操作列下面的编辑和删除
		table.on('tool(systemSettingIdFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;

			if (obj.event === 'edit') { //编辑事件
				var content = miniPage.getHrefContent('page/table/edit-system-setting.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '修改检测项信息',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['50%', '70%'],	//弹出窗尺寸，设置最小尺寸
					offset: ['15%', '25%'],	//弹出窗x,y位置
					content: content,
					success: function(layero, index){
						console.log(data);
						//绑定弹出层子页面控件的值（配合编辑页面）
						$(layero).find("input[name='medicalCode']").val(data.medicalCode);
						$(layero).find("input[name='medicalName']").val(data.medicalName);
						$(layero).find("input[name='medicalReference']").val(data.medicalReferemce);
						$(layero).find("input[name='referemceLow']").val(data.referemceLow);
						$(layero).find("input[name='referemceHigh']").val(data.referemceHigh);
						$(layero).find("input[name='repotId']").val(data.repotId);
						//单位下拉列表数据绑定
						let medicalUnitsHtml = '';
						medicalUnitsData.forEach(function(_item){
							medicalUnitsHtml += '<option value="'+ _item.value +'"';
							if (_item.value == data.medicalUnits) {
								medicalUnitsHtml += ' selected ';
							}
							medicalUnitsHtml += '>' + _item.data + '</option>';
						});
						$(layero).find("select[name='medicalUnits']").html(medicalUnitsHtml);//绑定拼接html
						
						//检验方法下拉列表数据绑定
						let medicalMethodHtml = '';
						medicalMethodData.forEach(function(_item){
							// console.log(_item);
							// console.log(data.medicalMethod);
							medicalMethodHtml += '<option value="'+ _item.value +'"';
							if (_item.value == data.medicalMethod) {
								medicalMethodHtml += ' selected ';
							}
							medicalMethodHtml += '>' + _item.data + '</option>';
						});
						$(layero).find("select[name='medicalMethod']").html(medicalMethodHtml);//绑定拼接html
	
						form.render(); //更新全部
					}
				});
			}
			return false;
		});

	});
	
	
	// function resizeLayer(layerIndex, layerInitWidth, layerInitHeight) {
	// 	var windowWidth = $(document).width();
	// 	var windowHeight = $(document).height();
	// 	var minWidth = layerInitWidth > windowWidth ? windowWidth : layerInitWidth;
	// 	var minHeight = layerInitHeight > windowHeight ? windowHeight : layerInitHeight;
	// 	layer.style(layerIndex, {
	// 		top: 0,
	// 		width: minWidth,
	// 		height: minHeight
	// 	});
	// }
</script>
